<template>
  <div>
    <el-drawer
      :visible.sync="supportVisibility"
      title="物品选择"
      :append-to-body="true"
    >
      <el-form ref="searchForm" class="searchForm" label-width="50">
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item label="名称">
              <el-input> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="" label="类别">
              <el-input> </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" icon="el-icon-edit">查询</el-button>
          <el-button
            type="warning"
            icon="el-icon-remove"
            @click="() => $refs.searchForm.resetFields()"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        ref="coreTable"
        :data="results"
        class="resultsTable"
        stripe
        highlight-current-row
        @row-click="rowClick"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="materialCode" label="ID/Code"></el-table-column>
        <el-table-column prop="materialName" label="名称"></el-table-column>
        <el-table-column
          prop="advisedPrice"
          label="建议零售价"
        ></el-table-column>
        <el-table-column width="180px" fixed="left">
          <template slot-scope="props">
            <el-button
              class="el-button--mini"
              type="warning"
              icon="el-icon-edit"
              @click="openById(props.row.materialCode)"
              >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination></el-pagination>
      <el-button type="success" @click="multiAdd">批量添加</el-button>
    </el-drawer>
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 *  物品
 * { id: 5, name: "黄豆004", advisedPrice: 12.1 },
 *
 */
import { testBill } from "@/apis";

// import New from './components/New.vue';
export default {
  name: "MaterialSupport",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      supportVisibility: false,
      results: [
        { materialCode: 1, materialName: "黄豆001", advisedPrice: 12.55 },
        { materialCode: 2, materialName: "葡萄021", advisedPrice: 16.55 },
        { materialCode: 3, materialName: "葡萄101", advisedPrice: 22.5 },
        { materialCode: 4, materialName: "瓜子363", advisedPrice: 22.0 },
        { materialCode: 5, materialName: "黄豆004", advisedPrice: 12.1 },
      ],
      selected: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {
    this.queryByCondition();
  },
  methods: {
    sampleM() {},
    queryByCondition() {
      testBill.queryMaterial().then((res) => {
        this.results = res.data;
      });
    },
    appear() {
      //  axios get data
      this.$nextTick(() => {
        this.supportVisibility = true;
      });
    },
    rowClick(row) {
      this.$message.info("当前列为 " + JSON.stringify(row));
    },
    multiAdd() {
      // this.selected
      //  1先验证是否选择正确或有意义有内容
      if (!this.selected || this.selected.length === 0) {
        this.$message.info("没有选中任何添加项目");
        return;
      }
      //  2核心变量容器变化
      this.$emit("postSelected", this.selected);

      //  3关闭页面出现视觉动画
      this.supportVisibility = false;
      this.$refs.coreTable.clearSelection();
    },
    selectionChange(rows) {
      // this.$notify.warning("Debug 行 :" + JSON.stringify(rows));
      this.selected = rows;
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
